<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="${ctx }/css/base.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx }/custom/uimaker/easyui.css">
<link href="${ctx }/css/process.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${ctx }/custom/uimaker/icon.css">
</head>
<body>
	<div id="cc" class="easyui-layout" style="width:100%;height:650px;">   
	    <div data-options="
	    region:'east',iconCls:'icon-reload',
	    title:'试题查看',split:false" 
	    style="width:300px;padding: 25px">
	    	
	    	<p id="type" style="font-size: 20px;margin: 10px">
	    	</p>
	    	<span style="font-size: 18px;">
	    	<font id="title"></font>
	    	(<font id="score" style="color:red"></font>分)
	    	</span>
	    	<div id="options">
	    	</div>
	    	<p id="answer" 
	    	style="font-size: 16px;font-weight: bold;
	    	letter-spacing: 2px;line-height: 20px;margin-top: 10px">
	    	</p>
	    	
	    </div>   
	    <div data-options="region:'center',title:'所有题目'" style="padding:0px;background:#eee;">
	    	<table id="dg"
     		 data-options="
     		 	fit:true,
     		 	rownumbers:true,
     		 	pagination:true,
     		 	striped:true,
     		 	singleSelect:true,
     		 	fitColumns:true,
     		 	toolbar:'#tb',
     		 	url:'${ctx }/test/titleFind',
     		 	onClickRow:function(i,r){
		     		var title = r.title;
		     		var type = r.type;
		     		var score = r.score;
		     		var answer = r.answer;
		     		$('#options').empty();
		     		if('sign'==type){
				 		type = '单选题';
				 		getOptions(r.options);
				 	}else if('muti'==type){
				 		type = '多选题';
				 		getOptions(r.options);
				 	}else if('is'==type){
				 		type = '判断题';
				 		if('1'==answer){
				 			answer = '正确';
				 		}else{
				 			answer = '错误';
				 		}
				 	}else if('text'==type){
				 		type = '主观题';
				 	}else if('input'==type){
				 		type = '填空题';
				 	}
				 	$('#type').html(type);
				 	$('#title').html(title);
				 	$('#score').html(score);
				 	
				 	$('#answer').html('答案:'+answer);
		     		
     		 	}
     		 "
     		>
     			<thead>
     				<tr>
     					<th field="ck" data-options="checkbox:true"></th>
     					<th field="title" width="250">题目</th>
     					<th field="loginName" width="80">出题人</th>
     					<th field="createDate" align="center" width="150" data-options="
     						formatter:function(v,r,i){
     						    //2018-04-03 00:00:00
     							if(v.length>=11){
     							   v = v.substring(0,11);
     							}
     							return v;
     						}
     					">出题时间</th>
     					<th field="lesson" width="80">科目</th>
     					<th field="score" width="80">分数</th>
     					<th field="type" width="80"
     					data-options="
     					 formatter:function(v,r,i){
     					 	if('sign'==v){
     					 		v = '单选题';
     					 	}else if('muti'==v){
     					 		v = '多选题';
     					 	}else if('is'==v){
     					 		v = '判断题';
     					 	}else if('text'==v){
     					 		v = '主观题';
     					 	}else if('input'==v){
     					 		v = '填空题';
     					 	}
     					 	return v;
     					 }
     					"
     					>类型</th>
     					<th field="action" align="center" width="100" data-options="
     						formatter:function(v,r,i){
     						    var str = '<a href=\'#\''
     						    +' onclick=\'editTitle('+r.id+')\'>修改</a>';
     							return str;
     						}
     					">操作</th>
     				</tr>
     			</thead>
     		</table>
     		<div id="tb" style="padding:0 30px;">
     			<c:if test="${eu.type eq '0' }">
	        	科目: <input class="easyui-textbox" type="text" name="lesson" style="width:166px;height:35px;line-height:35px;"></input>
	        	</c:if>
	        	类型: <input class="easyui-textbox" type="text" name="type" style="width:166px;height:35px;line-height:35px;"></input>
	        <a href="#" class="easyui-linkbutton" iconCls="icon-search" data-options="selected:true">查询</a>
	        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="addTitle()">新增</a>
	      </div>
	    </div>   
	</div> 
	
	
	<script type="text/javascript" src="${ctx }/custom/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx }/custom/jquery.easyui.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctx }/js/jquery-form.js"></script>
    <script type="text/javascript">
    $(function(){
    	$('#dg').datagrid({
    		
    	});
    	
    });
	function addTitle(){
		openDialog('新增题目');
	}
	function editTitle(){
		openDialog('编辑题目');
	}
	function openDialog(title){
		$('body').append('<div id="d1"></div>');
		$('#d1').dialog({
			title:title,
			modal:true,
			width:800,
			height:500,
			href:'${ctx}/test/addOrEdit',
			buttons:[{
				text:'保存',
				iconCls:'icon-save',
				handler:function(){
					var f = $('#dataForm');
					if(!f.form('validate')){
						return;
					}
					
					if('sign'==titleType||'muti'==titleType){
						var ps = $('#optionTd p');
						var str = '',flat = false;
						$.each(ps,function(i,p){
							var text = $(this).find('input');
							if(flat){
								str +='^V^';
							}
							flat = true;
							str += $(text).val();
						});
						$('#options_').val(str);
					}
					
					var answer = '';
					var ins = $('#answerTd input');
					if('sign'==titleType||'is'==titleType){
						var radios=document.getElementsByName("answer1");
						for(var i=0;i<radios.length;i++){
							if(radios[i].checked){
								if('is'==titleType){
									answer = cis[i];
								}else{
									answer = code[i];
								}
							}
						}
					}else if('muti'==titleType){
						flat = false;
						var checkboxs=document.getElementsByName("answer1");
						for(var i=0;i<checkboxs.length;i++){
							if(checkboxs[i].checked){
								if(flat){
									answer += ',';
								}
								flat = true;
								answer += code[i];
							}
						};
					}else{
						answer = $('#other').val();
					}
					$('#answers_').val(answer);
					
					$.ajax({
						type:'post',
						url:'${ctx}/test/titleAdd',
						data:f.serialize(),
						dataType:'json',
						success:function(r){
							alert(r.msg);
							if(r.sus){
								$('#d1').dialog('destroy');
								$('#dg').datagrid('reload');
							}
						}
					});
				}
			},{
				text:'取消',
				iconCls:'icon-cancel',
				handler:function(){
					$('#d1').dialog('destroy');
				}
			}]
		});
	}
	
	function getOptions(option){
		var options = option.split('^V^');
		var code = ["A","B","C","D","E","F","G","H","I","J"];
		$.each(options,function(i,op){
			var str = '<p style="margin: 10px;font-size: 16px">'
			+code[i]+':&nbsp;'+op+'</p>';
			$('#options').append(str);
		});
	}
	
	
	
	
	
	
	
    </script>
</body>
</html>